<template>
  <div>
    <div class="search-container">
      <el-input
          placeholder="请输入openid进行搜索"
          v-model="searchKey"
          clearable>
      </el-input>
    </div>
    <div class="table-container">
      <table class="data-table">
        <thead>
        <tr class="sticky-header">
          <th>id</th>
          <th>openid</th>
          <th>课程学期</th>
          <th>课程名称</th>
          <th>课程学分</th>
          <th>课程成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in filScore" :key="item.id">
          <td>
            <span>{{ item.id }}</span>
          </td>
          <td>
            <span>{{ item.openid }}</span>
          </td>
          <td>
            <span>{{ item.semester }}</span>
          </td>
          <td>
            <span>{{ item.name }}</span>
          </td>
          <td>
            <span>{{ item.credit }}</span>
          </td>
          <td>
            <span>{{ item.score }}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ScoreInfo",
  data(){
    return {
      allScore:[],
      searchKey:''
    }
  },
  mounted() {
    axios.post('/api/score')
        .then(res =>{
          console.log(res.data)
          this.allScore = res.data.msg
        })
        .catch(err =>{
          alert(err)
        })
  },
  computed:{
    filScore(){
      return this.allScore.filter((item) =>{
        return item.openid.indexOf(this.searchKey) !== -1
      })
    }
  }
}
</script>

<style scoped>
input{
  width: 500px;
}
.search-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.search-container input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.search-container button {
  padding: 5px 10px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  cursor: pointer;
}
.sticky-header {
  position: sticky;
  top: -5px;
  background-color: white; /* 可选：设置表头的背景色 */
}
.table-container {
  width: 85%; /* 根据你的需求设置固定宽度 */
  position: fixed;
  top: 200px;
  bottom: 0;
  left: 210px;
  overflow-y: scroll;
}
.edit-button {
  display: none; /* 初始隐藏按钮 */
}

tr:hover .edit-button {
  display: inline-block; /* 鼠标悬停时显示按钮 */
}

.data-table {
  width: 100%;
  font-size: 50%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px;
  border: 1px solid #ccc;
}

.data-table th {
  background-color: #f3f3f3;
}
</style>